<template>
	<div class="cate-tab5 swiper">
		<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
		<ol class="swiper-wrapper">
			<li v-for="( list , index ) in pages" :key="index" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<template v-if="item.id<18">
						<img :src="item.imgURL" />
						<aside>
							<h3>{{item.title}}</h3>
							<label>{{item.msg}} | <em>{{item.day}}天</em></label>
							<p>{{item.price}}</p>
						</aside>
					</template>
					<template v-if="item.id>17">
						<aside>
							<h4>{{item.en}}</h4>
							<span>查看更多></span>
						</aside>
					</template>
				</router-link>
			</li>
		</ol>

	</div>
</template>

<script>
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	export default {
		name: "CategoryTab5",
		props: ['propsCategoryTab5'],
		data() {
			return {
				tab3List: []

			}
		},
		created() {
			this.tab3List = this.propsCategoryTab5
		},
		computed: {
			// 程序将其当成是属性而不是函数，是个变量【循环/判断】
			pages() {
				let arr = []; //空数组，目的是：重组一个二维数组
				let num = 6; //每页条数
				// 将原数组遍历
				this.tab3List.forEach((item, index) => {
					// i：每页的页码
					let i = Math.floor(index / num);
					if (!arr[i]) arr[i] = [];
					arr[i].push(item);
				});
				return arr;
			}
		},
		setup() {
			onMounted(() => {
				new Swiper('.cate-tab5', {
					loop: true,
				})
			})
		}

	}
</script>

<style scoped>
	a {
		color: #000000;
		text-decoration: none;
	}

	.cate-tab5 {
		height: 9.2rem;
	}

	.cate-tab5 ol {
		width: 100%;
		height: 90%;
	}

	.cate-tab5 ol li {
		width: 100%;
		overflow: hidden;
	}

	.cate-tab5 img {
		width: 90%;
		height: 2.5rem;
		border-radius: 0.2rem;
	}

	.cate-tab5 ol li a {
		margin-top: 0.15rem;
		float: left;
		width: 33%;
		margin-top: 0.5rem;
		position: relative;
	}

	.cate-tab5 aside h3 {
		margin: 0.1rem;
		font-size: 0.35rem;
		font-weight: bold;
		width: 2.5rem;
	}

	.cate-tab5 aside label {
		color: white;
		position: absolute;
		top: 0.5%;
		right: 10%;
		border-radius: 0 0.2rem 0 0.2rem;
		font-size: 0.26rem;
		padding: 0.1rem;
		background-color: rgba(0, 0, 0, 0.7);
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/*与高度有关*/
		/* 超出盒子外的文本用省略号代替 */
		-webkit-box-orient: vertical;
	}

	.cate-tab5 aside p {
		font-size: 0.3rem;
		font-weight: bold;
		color: white;
		position: absolute;
		top: 2rem;
		left: 0.2rem;
	}
	.cate-tab5 a:last-child h4 {
		display: block;
		margin: 0.5rem auto;
		font-size: 0.3rem;
		font-weight: bold;
		text-align: center;
		width: 1.5rem;
		border-bottom: 0.2rem solid #ffd825;
	}

	.cate-tab5 a:last-child span {
		margin: 0 auto;
		display: block;
		text-align: center;
		background-color: #ffd825;
		padding: 0.1rem;
		border-radius: 0.2rem;
		width: 1.5rem;
		font-weight: bold;
	}
</style>
